<template>
  <div class="path-index">
    <Header>地址管理</Header>
    <section>
        <ul>
            <li @click="goList(item,index)" v-for="(item,index) in addressList" :key="index" >
                <div class="top">
                    <span class="name">{{item.name}}</span>
                    <span class="tel">{{item.tel}}</span>
                </div>
                <div class="bottom">
                    <span class="active" v-if="item.isDefault ==1">[默认]</span>
                    <span>{{item.province}} {{item.city}} {{item.county}} {{item.addressDetail}}</span>
                </div>
                <div class="icon"  @click.stop="goList('edit',index,item)">
                    <i class="iconfont">&#xe6b0;</i>
                </div>
            </li>
        </ul>
        <div class="add-address" @click="goList('add')">添加地址</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from '@/components/path/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
 //引入axios的二次封装
 import http from '@/common/api/request.js'
import { mapState,mapMutations } from 'vuex'
 
export default {
    name:'path-index',
    components:{
        Header,
        Tabbar
    },
    data(){
        return{
            pathStatus:false,
        }
    },
    computed:{
        //通过调用vuex中的addressList 获取地址列表
        ...mapState({
            addressList:state=>state.path.addressList
        })
    },
    created(){
        this.getData()
        //判断是从哪个界面进来的
        if(this.$route.query.type =='select'){
            this.pathStatus = true
        }else{
            this.pathStatus = false
        }
    },
    methods:{
        //定义vuex中的initAddress方法
        ...mapMutations(['initAddress']),
        //跳转至添加地址
        goList(option,index,item){
            //默认状态点击跳转地址编辑（this.pathStatus如果为false 代表直接打开地址编辑页面 为true的话是从 订单页面 跳转至该页面进行操作）
            
            if(!this.pathStatus){
                //进行判断 如果是通过编辑小图标进来（小图标传递的第一个参数是edit，和直接点击进来的不同）
                if(option == 'edit'){
                    this.$router.push({
                    name:'path-list',
                    params:{
                        key:JSON.stringify(item)
                        }
                    })
                }else{
                    this.$router.push({
                    name:'path-list',
                    params:{
                        key:JSON.stringify(option)
                        }
                    })
                }
               
            }else{
                //进行判断 1.用户点击的是添加地址 2.用户点击的是编辑地址 3. 用户点击地址即是选中地址
                if(option == 'add'){
                    this.$router.push({
                    name:'path-list',
                    params:{
                        key:JSON.stringify(option)
                        }
                    })
                }else if(option =='edit'){
                    this.$router.push({
                    name:'path-list',
                    params:{
                        key:JSON.stringify(item)
                        }
                    })
                }else{
                    //如果是从订单页面跳转过来 点击地址后返回订单页面并传值
                    this.$router.push({
                        name:'Order',
                        query:{
                            path:JSON.stringify(this.addressList[index])
                        }
                    })
                }
                console.log(option,item)
            }
            
            
        },
        //获取用户地址数据
        getData(){
            http.$axios({
                url:'/api/selectAddress',
                headers:{
                    token:true
                }
            }).then(res=>{
                //使用vuex中mutation的方法存储用户地址至state中的addressList
                this.initAddress(res.data)
            })
        }
    },

}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
section::before{
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    background-color: #f5f5f5;
    z-index: -1;
    width: 100%;
    height: 100%;
}
section{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    span{
        font-size: (14 / @rootsize);
    }
    ul{ 
        margin-top: (10 / @rootsize);
        li{
            position: relative;
            width: 100vw;
            padding: (10 / @rootsize) (40 / @rootsize) (10 / @rootsize) (10 / @rootsize);
            background-color: #fff;
            .top{
                .name{
                    margin-right: (10 / @rootsize);
                }
            }
            .bottom{
                span:first-child{
                    margin-right: (6 / @rootsize);
                }
            }
            .active{
                color: #b0352f;
            }
        }
    }
    .add-address{
        margin-top: (50 / @rootsize);
        padding: (10 / @rootsize) (20 / @rootsize);
        width: (120 / @rootsize);
        background-color: #b0352f;
        font-size: (15 / @rootsize);
        color: #fff;
        text-align: center;
        
    }
    .icon{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        width: (40 / @rootsize);
        height: 100%;
        text-align: center;
        
        i{
            font-size: (20 / @rootsize);
        }
    }
}
</style>